<template>
  <div class="app-container">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
            查看已删门店
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" :editable="false" :clearable="false" unlink-panels
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id" @change="storeChange">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-select placeholder="选择区域" v-model="formInline.area_id" style="width:100px" filterable @change="areaChang">
            <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row show-summary :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" prop="h" label="日期" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="goPage(scope.row)">{{scope.row.h}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="收银台收入">
          <el-table-column align="center" prop="cash_actual" label="现金"></el-table-column>
          <el-table-column align="center" prop="bank_actual" label="银行卡"></el-table-column>
          <el-table-column align="center" prop="money_aliy" label="支付宝"></el-table-column>
          <el-table-column align="center" prop="money_wx" label="微信"></el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="wx" label="小程序核销"></el-table-column>
        <el-table-column align="center" label="兑币机">
          <el-table-column align="center" prop="cash_convert" label="现金">
          </el-table-column>
          <el-table-column align="center" prop="aliy_convert" label="支付宝">
          </el-table-column>
          <el-table-column align="center" prop="wechat_convert" label="微信">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="扫码支付">
          <el-table-column align="center" prop="qr_money_aliy" label="支付宝"></el-table-column>
          <el-table-column align="center" prop="qr_money_wx" label="微信"></el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="collecting_actual" label="代收待核"> </el-table-column>
        <el-table-column align="center" prop="koubei_convert" label="口碑核销"></el-table-column>
        <el-table-column align="center" prop="kuaiying_convert" label="快盈核销"></el-table-column>
        <el-table-column align="center" prop="recover_money" label="追账金额"> </el-table-column>
        <el-table-column align="center" prop="total" label="实收合计" :render-header="(h,obj) => renderHeader(h,obj,'实收合计包含追账金额')"></el-table-column>
        <el-table-column align="center" label="差异" prop="diff">
          <template slot-scope="scope">
            <span :class="{danger:scope.row.diff!=0}">{{scope.row.diff}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getList, getPage, getStoreList, getAreaList } from '@/api/storage_control/revenueAll_form.js';
import { pickerOptionsF, pickerDateF, optionMaxTime, renderHeader } from '@/utils';
export default {
  data() {
    return {
      renderHeader,
      list: [],
      total: null,
      listLoading: false,
      storeList: null,
      areaList: [],
      formInline: {
        store_id: '',
        area_id: '',
        begin_time: '',
        end_time: '',
        look_del: '0'
      },
      pickerOptions: pickerOptionsF(-1),
      pickerDate: pickerDateF(-1, -1)
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.beforeComingIn();
      if (!vm.storeList || vm.$route.params.from == 1) {
        vm.getStore();
      }
    });
  },
  methods: {
    lookDelChange() {
      this.getStore();
    },
    goPage(row) {
      this.$router.push({
        name: 'report/revenueDay_form',
        params: {
          store_id: row.store_id,
          area_id: this.formInline.area_id,
          pickerDate: row.h,
          look_del: this.formInline.look_del,
          from: 2 //1.账务查询跳转，2.实收汇总跳转，
        }
      });
    },
    beforeComingIn() {
      if (this.$route.params.from == 1) {
        this.formInline.store_id = this.$route.params.store_id;
        this.formInline.look_del = this.$route.params.look_del;
        this.formInline.area_id = '';
        this.pickerDate = this.$route.params.pickerDate;
        this.searchClick();
      }
    },
    getStore() {
      getStoreList({ look_del: this.formInline.look_del, category_id: 282 }).then(response => {
        this.storeList = response;
        if (this.$route.params.store_id == null) {
          let data = response.filter(res => res.id == this.$store.getters.optionId);
          if (data.length > 0) {
            this.formInline.store_id = data[0].id;
          } else {
            if (this.storeList.length > 0) {
              this.formInline.store_id = this.storeList[0].id;
            }
          }
        } else {
          this.formInline.store_id = this.$route.params.store_id;
        }

        if (this.formInline.store_id) {
          this.getArea();
        }
      });
    },
    storeChange() {
      this.formInline.area_id = '';
      this.getArea();
    },
    areaChang() {
      this.searchClick();
    },
    getArea() {
      getAreaList({ sid: this.formInline.store_id }).then(response => {
        response.unshift({ id: '', name: '全部区域' });
        this.areaList = response;
      });
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        if (this.formInline.store_id == '') {
          this.$message({ type: 'error', message: '请选择门店' });
          return;
        }
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline)
        .then(response => {
          response.forEach(val => {
            val.wx = (val.wx_program / 1).toFixed(2);
            val.money_aliy *= 1;
            val.money_wx *= 1;
            val.koubei_convert *= 1;
            val.kuaiying_convert *= 1;
            // 合计
            val.total =
              (
                val.aliy_convert * 1 +
                val.bank_actual * 1 +
                val.bank_convert * 1 +
                val.cash_actual * 1 +
                val.cash_convert * 1 +
                val.collecting_actual * 1 +
                val.money_aliy * 1 +
                val.money_wx * 1 +
                val.qr_money_aliy * 1 +
                val.qr_money_wx * 1 +
                val.wechat_convert * 1 +
                val.recover_money * 1 +
                val.koubei_convert * 1 +
                val.kuaiying_convert * 1 +
                val.wx * 1
              ).toFixed(2) * 1;
            // 差异
            val.diff =
              (
                val.cash_receivable * 1 +
                val.bank_receivable * 1 +
                val.collecting_receivable * 1 -
                val.recover_money * 1 -
                val.cash_actual * 1 -
                val.bank_actual * 1 -
                val.collecting_actual * 1
              ).toFixed(2) * 1;
          });
          this.list = response;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>